<template>
  <div class="system-status">
    <a-card title="系统状态" size="small" v-if="!collapsed">
      <a-space direction="vertical">
        <a-tag :color="chatStore.systemStatus.llm ? 'success' : 'error'">
          LLM: {{ chatStore.systemStatus.llm ? '在线' : '离线' }}
        </a-tag>
        <a-tag :color="chatStore.systemStatus.browser ? 'success' : 'error'">
          浏览器: {{ chatStore.systemStatus.browser ? '在线' : '离线' }}
        </a-tag>
        <a-tag :color="chatStore.systemStatus.redis ? 'success' : 'error'">
          Redis: {{ chatStore.systemStatus.redis ? '在线' : '离线' }}
        </a-tag>
      </a-space>
    </a-card>
    
    <!-- 收起状态下的简化显示 -->
    <div v-else class="collapsed-status">
      <div class="status-indicators">
        <div 
          class="status-dot"
          :class="{ 'online': chatStore.systemStatus.llm, 'offline': !chatStore.systemStatus.llm }"
          :title="'LLM: ' + (chatStore.systemStatus.llm ? '在线' : '离线')"
        ></div>
        <div 
          class="status-dot"
          :class="{ 'online': chatStore.systemStatus.browser, 'offline': !chatStore.systemStatus.browser }"
          :title="'浏览器: ' + (chatStore.systemStatus.browser ? '在线' : '离线')"
        ></div>
        <div 
          class="status-dot"
          :class="{ 'online': chatStore.systemStatus.redis, 'offline': !chatStore.systemStatus.redis }"
          :title="'Redis: ' + (chatStore.systemStatus.redis ? '在线' : '离线')"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useChatStore } from '@/stores/chat'
import { getSystemStatus } from '@/api/chat'

// 接收父组件传递的collapsed状态
defineProps<{
  collapsed?: boolean
}>()

const chatStore = useChatStore()

onMounted(async () => {
  try {
    const status = await getSystemStatus()
    chatStore.updateSystemStatus({
      llm: status.llm_available,
      browser: status.browser_available,
      redis: status.redis === 'connected'
    })
  } catch (error) {
    console.error('获取系统状态失败:', error)
  }
})
</script>

<style scoped>
.system-status {
  padding: 12px;
}

.collapsed-status {
  padding: 8px;
  display: flex;
  justify-content: center;
}

.status-indicators {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: all 0.3s ease;
  cursor: pointer;
}

.status-dot.online {
  background-color: #52c41a;
  box-shadow: 0 0 4px rgba(82, 196, 26, 0.5);
}

.status-dot.offline {
  background-color: #ff4d4f;
  box-shadow: 0 0 4px rgba(255, 77, 79, 0.5);
}

.status-dot:hover {
  transform: scale(1.2);
}
</style>